<template>
  <el-card shadow="never" class="never">
    <template #header>
      <!-- 查询部分 -->
      <div style="display: flex; justify-content: space-between">
        <div>
          <el-form :model="searchForm">
            <el-form-item label="关键词">
              <el-input
                v-model="searchForm.keyword"
                clearable
                placeholder="请输入管理员名称"
              />
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button type="primary" @click="getList()">搜索</el-button>
          <el-button @click="reseSearchForm" plain>刷新</el-button>
        </div>
      </div>
      <!-- 新增/刷新 -->
      <div style="display: flex; justify-content: space-between">
        <el-button type="primary" size="10" @click="handleAdd" plain
          >新增</el-button
        >
        <el-button size="default" @click="reload">
          <el-icon><Refresh /></el-icon>
        </el-button>
      </div>
    </template>
    <div style="height: calc(100%)">
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        :header-cell-style="{ textAlign: 'center' }"
        row-key="title"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          prop="role_number"
          label="角色编号"
          width="120"
          sortable
        />
        <el-table-column
          prop="role_name"
          label="角色名称"
          width="120"
          sortable
        />
        <el-table-column
          prop="authority_character"
          label="权限字符"
          width="90"
        />
        <el-table-column
          prop="display_order"
          label="显示顺序"
          align="center"
          width="110"
          sortable
        />
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              inline-prompt
              active-value="1"
              inactive-value="0"
              disabled
          /></template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <!-- 判断是不是超级管理员 -->
            <small
              v-if="scope.row.super == 1"
              class="text-sm text-gray-500"
            ></small>
            <div v-else>
              <el-button
                link
                icon="EditPen"
                type="primary"
                @click="handleEdit(scope.row)"
                >修改</el-button
              >
              <el-button
                link
                icon="Delete"
                type="danger"
                @click="handleDelete(scope.row.id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--弹窗-->
      <el-dialog v-model="dialogFormVisible" :title="title" width="40%">
        <el-form :model="form" label-width="100px" style="padding-right: 30px">
          <el-form-item label="角色编号">
            <el-input v-model="form.role_number" autocomplete="off" />
          </el-form-item>
          <el-form-item label="角色名称">
            <el-input v-model="form.role_name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="权限字符">
            <el-input v-model="form.display_order" autocomplete="off" />
          </el-form-item>
          <el-form-item label="显示顺序">
            <el-input v-model="form.display_order" autocomplete="off" />
          </el-form-item>
          <el-form-item label="状态">
            <el-input v-model="form.status" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="save">确认</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
// import { Query } from "@/api/system/role";
import { Query, Addition, Modify, Delete } from "@/api/system/role";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      tableData: [],
      searchForm: [],
      form: [],
      multipleSelection: [],
      title: "",
      dialogFormVisible: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    //获取初始化数据
    getData() {
      Query().then((res) => {
        console.log("用户列表", res);
        this.tableData = res.data;
      });
    },
    //编辑 先赋值到表单再弹窗
    handleEdit(row, index) {
      const newObj = Object.assign({}, row);
      this.form = newObj;
      this.title = "修改";
      this.dialogFormVisible = true;
    },
    //新增 先清空表单再弹窗
    handleAdd() {
      this.form = {};
      this.title = "新增";
      this.dialogFormVisible = true;
    },
    reload() {
      this.getData();
    },
    //修改确定
    save() {
      const data = Object.assign({}, this.form);
      console.log(data);
      Modify(data).then((res) => {
        console.log(res);
        ElMessage({
          message: "修改成功",
          type: "success",
          plain: true,
        });
        this.dialogFormVisible = false;
        this.getData();
      });
    },
    //删除
    remove() {
      tableData.value.splice(index, 1);
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
  },
};
</script>
<style>
.never {
  height: calc(100%);
}
</style>
